<template>
  <div class="add-one-wrapper" :style="{height:height+'px'}">
    <top-bar :title="topTitle"></top-bar>

    <div class="add-one-con" v-if="addStatus==0">
      <div class="top">
        <div class="address-con">
          <popup-picker
            :data="addressList"
            v-model="addressValue"
            @on-change="addressChange"
            show-name
            placeholder="选择地区"></popup-picker>
        </div>
        <div>
          <x-input  v-model="form.birthNumber"  placeholder="请输入出生证号" :show-clear="false"></x-input>
          <x-input  v-model="form.mother"  placeholder="请输入母亲姓名" :show-clear="false"></x-input>
        </div>
      </div>

      <div class="btn-wrapper">
        <x-button @click.native="next" class="next-btn">下一步</x-button>
        <x-button @click.native="skipGo" class="skipGo-btn">跳过该步骤</x-button>
        <p class="des">
          <img src="../../../static/images/home/tip.png" width="12">
          若无接种记录可跳过该步骤直接新增儿童
        </p>
      </div>
    </div>

    <div class="add-two-con" v-if="addStatus==1">
      <div class="info info1">
        <h4>儿童信息</h4>
        <div class="top-l">居住地址</div>
        <div class="center-l">{{dataInfo.nowDetail}}</div>
        <div class="top-l">出生证号</div>
        <div class="center-l">{{dataInfo.birthNumber}}</div>
        <div class="top-l">疫苗本号</div>
        <div class="center-l center-l-last">{{dataInfo.serial}}</div>
      </div>
      <div class="info info2">
        <h4>详细信息</h4>
        <div class="group">
          <div class="left">儿童姓名</div>
          <div class="right">{{dataInfo.name}}</div>
        </div>
        <div class="group">
          <div class="left">妈妈姓名</div>
          <div class="right">{{dataInfo.mother}}</div>
        </div>
        <div class="group">
          <div class="left">爸爸姓名</div>
          <div class="right">{{dataInfo.father}}</div>
        </div>
        <div class="group">
          <div class="left">同儿童关系</div>
          <div class="right">{{dataInfo.relationship}}</div>
        </div>
        <div class="group">
          <div class="left">儿童性别</div>
          <div class="right right-boy" v-if="dataInfo.sex=='0'">
            <a class="right-boy-link"><img src="../../../static/images/add/boy.png"><span>男</span></a>
          </div>
          <div class="right right-girl" v-else>
            <a class="right-girl-link"><img src="../../../static/images/add/girl.png"><span>女</span></a>
          </div>
        </div>
       <div class="group-l">
          <div class="left">儿童生日</div>
          <div class="right">{{dataInfo.birthday}}</div>
        </div>
        <div class="group group-photo">
          <div class="left">儿童照片</div>
          <div class="right" v-if="dataInfo.babyPhoto">
            <img :src="dataInfo.babyPhoto">
          </div>
          <div class="right" v-else>
            <img src="../../../static/images/add/photo.png">
          </div>
        </div>
      </div>
      <div class="info info3">
        <h4>接种历史</h4>
        <ul>
          <li v-for="(item,index) in dataInfo.hisList" :key="index">
            <p class="title" v-if="item.vaccinateName">{{item.vaccinateName}}</p>
            <p class="time">注射日期: {{$moment(item.inotime).format('YYYY-MM-DD')}} 第{{item.dose}}剂/共{{item.totalDose}}剂</p>
          </li>
        </ul>
      </div>
      <div style="height: 70px;"></div>
      <div class="btn-wrapper-l">
        <x-button @click.native="submit">立即同步</x-button>
      </div>
    </div>
  </div>
</template>

<script>
  import TopBar from '@/components/top';
  import { XInput,XButton,PopupPicker,Datetime,Popup } from 'vux'

    export default {
        name: "add-one",
        metaInfo () {
          return {
            title: '新增儿童信息'
          }
        },
      data(){
        return {
          topTitle:'新增儿童信息',
          addressList:[],
          addressValue:[],

          form:{
            addressValue:'',
            birthNumber:'',
            mother:''
          },
          formData:{
            name:'',
            birthday:'',
            sex:'',
            nowdetail:'',
            serial:'',
            father:'',
            mother:'',
            birthNumber:'',
            relationship:'',
            userId:'',
            hisList:'',
          },

          addStatus:0,
          dataInfo:{},

          height:document.documentElement.clientHeight,
        }
      },
      mounted(){
        this.getData();
      },
      methods:{
        getData(){
          this.$api.get('/baby/getConfigAddress').then( (res)=> {
            if(res.data.result==0){
              let obj=res.data.obj;
              let array=[];
              for(let i in obj){
                array.push({
                  name: obj[i].text,
                  value: obj[i].value,
                })
              }
              this.addressList=[array]
            }
          })
        },
        addressChange(val){
          this.form.addressValue=val[0]
        },
        skipGo(){
          this.$router.push({path: '/add'})
        },
        next(){
          let that=this;
          let formdata=Object.assign(this.form)
          this.$api.post('/baby/getBabyInfoByBornNum',formdata).then( (res)=> {
            if(res.data.result==0){
              // this.$vux.toast.text('信息查询成功', 'middle');
              this.$vux.toast.show({
                text: '信息查询成功',
                type:'text',
                onHide () {
                  that.addStatus=1;
                  that.dataInfo=res.data.obj;
                  that.formData.name=res.data.obj.name;
                  that.formData.birthday=res.data.obj.birthday;
                  that.formData.sex=res.data.obj.sex;
                  that.formData.nowdetail=res.data.obj.nowdetail;
                  that.formData.serial=res.data.obj.serial;
                  that.formData.father=res.data.obj.father;
                  that.formData.mother=res.data.obj.mother;
                  that.formData.birthNumber=res.data.obj.birthNumber;
                  that.formData.relationship=res.data.obj.relationship;
                  that.formData.hisList=res.data.obj.hisList;
                  that.formData.userId=JSON.parse(sessionStorage.getItem('userInfo')).userId;
                }
              })

              }else{
               this.$vux.toast.text(res.data.msg, 'middle')
            }
          })
        },
        submit(){
          let that=this;
          let form=Object.assign(this.formData);
          this.$api.post('/baby/syncBabyInfo',form).then( (res)=> {
            if(res.data.result==0){
              this.$vux.toast.show({
                text: '儿童王晓晓信息同步成功',
                type:'text',
                onHide () {
                  that.$router.push({path: '/index'})
                }
              })
            }else{
              this.$vux.toast.text(res.data.msg, 'middle')
            }
          })
        }
      },
      components: {
        XInput,
        XButton,
        PopupPicker,
        Datetime,
        Popup,
        TopBar
      }
    }
</script>

<style lang="scss">
  .add-one-wrapper{
    background: #fff;
    .top{
      background:rgba(255,255,255,1);
      box-shadow:0px 0px 7px 0px rgba(225,225,225,1);
      border-radius:8px;
      margin:20px 15px;
      .weui-input{
        height: 40px;
        line-height: 40px;
        color:rgba(38,38,38,1);
        font-size: 14px;
        &::-webkit-input-placeholder {
          color:rgba(173,173,173,1);
          font-size: 14px;
        }
      }
      .address-con{
        .vux-popup-picker-select{
          height: 40px;
          line-height: 40px;
          text-align:left!important;
          .vux-popup-picker-placeholder{
            color: #adadad;
            font-size: 14px;
          }
          .vux-cell-value{
            color: #262626;
            font-size: 14px;
          }
        }
        .weui-cell_access{
          border-bottom: 1px solid #E5E5E5;
        }
        .weui-cell{
          padding:10px 0;
          margin:0 15px;
        }
      }
    }
    .btn-wrapper{
      margin:40px 15px 0;
      .next-btn{
        background:rgba(245,99,99,1);
        border-radius:24px;
        height: 46px;
        line-height: 46px;
        font-size:17px;
        font-family:PingFang SC;
        font-weight:bold;
        color:rgba(255,255,255,1);
        &.weui-btn_default:not(.weui-btn_disabled):active{
          background:rgba(245,99,99,1);
          color:rgba(255,255,255,1);
        }
      }
      .skipGo-btn{
        border:1px solid rgba(245,99,99,1);
        border-radius:24px;
        font-size:17px;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(245,99,99,1);
        background: #fff;
      }
      .des{
        font-size:13px;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(153,153,153,1);
        margin-top: 20px;
        text-align: center;
        span{
          vertical-align: middle;
        }
      }
    }
    .add-two-con{
      .info{
        background:rgba(255,255,255,1);
        box-shadow:0px 0px 7px 0px rgba(225,225,225,1);
        border-radius:8px;
        margin: 15px;
        padding:15px 10px;
        h4{
          font-size:15px;
          font-family:PingFang SC;
          font-weight:bold;
          color:rgba(51,51,51,1);
          border-left:3px solid #F56363;
          padding-left:4px;
          margin-bottom: 20px;
        }
        .top-l{
          font-size:15px;
          font-family:PingFang SC;
          font-weight:500;
          color:rgba(102,102,102,1);
          padding:0px 0 20px 0;
        }
        .center-l{
          font-size:15px;
          font-family:PingFang SC;
          font-weight:500;
          color:rgba(51,51,51,1);
          border-bottom:1px solid rgba(229,229,229,1);
          padding-bottom: 12px;
          margin-bottom: 22px;
          &-last{
            border-bottom:none;
            margin-bottom:0;
          }
        }
      }
      .info2{
        .group{
          zoom: 1;
          height: 40px;
          line-height: 40px;
          border-bottom:1px solid rgba(229,229,229,1);
          &:last-child{
            border-bottom: none;
          }
          &:after{
            display:block;
            clear:both;
            content:"";
            visibility:hidden;
            height:0;
          }
          .left{
            float: left;
            font-size:15px;
            font-family:PingFang SC;
            font-weight:500;
            color:rgba(102,102,102,1);
          }
          .right{
            float: right;
            font-size:15px;
            font-family:PingFang SC;
            font-weight:500;
            color:rgba(51,51,51,1);
            &-boy{
              img{
                width: 13px;
                height: 13px;
                margin-right: 6px;
              }
              span{
                vertical-align: middle;
              }
              &-link{
                background: #9cbff3;
                padding:4px 12px;
                border-radius: 20px;
                color: #2877ec;
              }
            }
            &-girl{
              img{
                width: 13px;
                height: 13px;
                margin-right: 6px;
              }
              span{
                vertical-align: middle;
              }
              &-link{
                background:rgba(255,104,163,0.2);
                padding:4px 12px;
                border-radius: 20px;
                color:rgba(255,104,163,1);
              }
            }
          }
          &-photo{
            height: 80px;
            img{
              width: 60px;
              height: 60px;
              padding-top: 10px;
              border-radius: 50%;
            }
          }
          &-l{
            height: 40px;
            line-height: 40px;
            border-bottom:1px solid rgba(229,229,229,1);
            display: flex;
            justify-content : space-between;
            width: 100%;
            .left{
              font-size:15px;
              font-family:PingFang SC;
              font-weight:500;
              color:rgba(102,102,102,1);
              flex: 0 0 80px;
            }
            .right{
              flex: 1;
              text-align: right;
              font-size:15px;
              font-family:PingFang SC;
              font-weight:500;
              color:rgba(51,51,51,1);
            }
          }
        }
      }
      .info3{
        ul{
          li{
            background:rgba(247,247,247,1);
            border-radius:10px;
            padding: 20px;
            margin-bottom: 10px;
            &:last-child{
              margin-bottom: 0;
            }
            .title{
              font-size:15px;
              font-family:PingFang SC;
              font-weight:500;
              color:rgba(51,51,51,1);
              margin-bottom: 14px;
            }
            .time{
              font-size:13px;
              font-family:PingFang SC;
              font-weight:500;
              color:rgba(153,153,153,1);
            }
          }
        }
      }
    }
    .btn-wrapper-l{
      position: fixed;
      bottom: 0;
      width:100%;
      height: 70px;
      left: 0;
      right: 0;
      background:rgba(255,255,255,1);
      box-shadow:0px -1px 6px 0px rgba(200,212,221,0.54);
      .weui-btn{
        background:rgba(245,99,99,1);
        border-radius:24px;
        font-size:17px;
        font-family:PingFang SC;
        font-weight:bold;
        color:rgba(255,255,255,1);
        height: 50px;
        line-height: 50px;
        width: 80%;
        margin: 10px auto 0px;
      }
      .skipGo-btn.weui-btn_default:not(.weui-btn_disabled):active{
        border: 1px solid #f56363;
        background: #fff;
        color: #f56363;
      }
    }
  }
</style>
